<template>
	<view>
		<showNewData ref='chrild5' ></showNewData>
		<view class="top_bar" style="background: rgba(244,244,244,0.96); border-bottom:1rpx solid #b5b5b5;" >
			<view @click="backLogin" class="top_bar_left">
				<view class="text">取消</view>
			</view>
			<view class="top_bar_center">
				<text>邀请好友</text>
			</view>
			<view class="top_bar_right"></view>
		</view>
		<view class="friends">
			<view class="users" v-for='item,index in users' :key='index'>
				<view class="selected" @click="selected(index)">
					<image src="../../static/yes.png" mode="" v-if="item.selected"></image>
				</view>
				<view class="user-img">
					<image :src="item.userImg" mode=""></image>
				</view>
				<view class="name">
					{{ item.name }}
				</view>
			</view>
		</view>
		<view class="but">
			<view @click='onBuildGroup' class="buts" :class="{notsubmits:notsubmit}">
				创建群聊({{addnum}})
			</view>
		</view>
		
	</view>
</template>

<script>
	import showNewData from '../../components/showNewData.vue'
	import datas from '../../commons/js/data.js'
	import request from '../../utails/request.js'
	
	export default {
		data() {
			return {
				userid:0,
				groupname:'',
				users:[],// 好友数组
				notsubmit:true,
				addnum:0
			}
		},
		components:{
			showNewData
		},
		onLoad(e) {
			// 数据栈
			let pages = getCurrentPages()
			let data = pages[pages.length - 1].options
			this.userid = data.userid
			this.groupname = data.groupname
			console.log(pages)
		},
		onShow() {
			this.getUserFriend()
		},
		methods: {
			// 接socket提醒
			getSocketData(){
				this.socket.emit('login',this.userid)
				this.socket.on('shows',(data)=>{
	
					let datas = {
						userimg:data.userimg,
						username:data.username,
						message:data.message
					}
					
					let ch = this.$refs.chrild5
					setTimeout(()=>{
						ch.handleShow(datas)
					},300)
				})
			},
			
			// 点击选中
			selected(e){
				this.users[e].selected = !this.users[e].selected
				// 计算选中个数
				this.addnum = 0
				this.users.forEach(v=>{
					if(v.selected){
						this.addnum++
					}
				})
				if(this.addnum!=0){
					this.notsubmit = false
				}else{
					this.notsubmit = true
				}
			},
			
			async getUserFriend(){
				let data = {
					userid:this.userid,
					groupname:this.groupname
				}
				let res = await request.request2({url:'/getaddfriend/', data})
				res.forEach(v=>{
					v.selected = false
				})
				this.users = res
				
				// 接收socket
				this.getSocketData()
			},
			
			// 确认
			async onBuildGroup(){
				let add_users = []
				this.users.forEach(v=>{
					if(v.selected==true){
						add_users.push(v.id)
					}
				})
				
				let data = {
					userid:this.userid,
					groupname:this.groupname,
					add_users:add_users
				}
				
				let res = await request.request2({url:'/group_detail/',data, method:'PUT' })
				if(res.code=='200'){
					uni.showToast({
						title:'操作成功'
					})
					this.getUserFriend()
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1500)
				}else{
					uni.showToast({
						title:'操作失败',
						icon:'none'
					})
					this.getUserFriend()
				}
			},
			
			// 返回上一页
			backLogin(){
				uni.navigateBack({
					delta:1
				})
			},
		}
	}
</script>

<style>
	@import '../../commons/css/myss.scss';
	
	.friends{
		margin-top:100rpx;
		padding: 0 20rpx;
		display: flex;
		flex-direction: column;
		z-index: 10;
	}
	.title{
		text-align: left;
		font-size: 40rpx;
		padding: 30rpx 40rpx;
		margin-left: 40rpx;
		
	}
	.friends .users{
		font: 1;
		margin: 8rpx 0;
		
	}
	.friends .users .selected{
		float: left;
		margin: 15rpx;
		margin-left: 85rpx;
		width: 60rpx;
		height: 60rpx;
		background-color: rgba(255,228,49,0.5);
		border-radius: 20rpx;
	
	}
	.friends .users .selected image{
		width: 60rpx;
		height: 60rpx;
	}
	.friends .users .user-img{
		float: left;
		height: 90rpx;
	}
	.friends .users .user-img image{
		width: 90rpx;
		height: 90rpx;
		border-radius: 20rpx;
	}
	.friends .users .name{
		float: left;
		margin-left: 20rpx;
		font-size: 30rpx;
		width: 400rpx;
		height: 90rpx;
		line-height: 90rpx;
		display: -webkit-box;
		overflow: hidden; 
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	
	/* but */
	 .but{
		/* 安全距离 */
		padding-bottom: var(--status-bar-height);
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 104rpx;
		background-color:rgba(244,244,244,0.96);
		z-index: 90;
	}
	 .but .buts{
		margin-left: 10%;
		margin-top: 7rpx;
		width: 80%;
		height: 90rpx;
		background-color:#f4ea2a ;
		text-align: center;
		color: white;
		font-size: 40rpx;
		line-height: 90rpx;
		/* z-index: 90; */
	}
	.but .notsubmits{
		background-color: #dedede;
	}
</style>
